<template>
  <div class="mainBox">
<!-- 评论部分 -->  
<div class="header">  
  <div class="comment">  
    评论  
  </div>  
  <div class="commentNum">  
    {{ totalComments }}  
  </div>  
  <div class="switch">  
    <div @click="setActiveTab(0)" :class="{ active: activeTab === 0 }">最新评论</div>  
    <div>|</div>  
    <div @click="setActiveTab(1)" :class="{ active: activeTab === 1 }">最热评论</div>  
  </div>  
</div>
    <!-- 发布部分 -->
    <div class="wrapper">
      <i class="avatar"></i>
      <textarea v-model="comment" @focus="showCount" @blur="hideCount" @input="updateCount" 
      placeholder="善言结善缘，恶语伤人心" rows="2" maxlength="100" 
      class="txt"></textarea>
      <button @click="publishComment">发布</button>
    </div>
    <div class="wrapper" v-if="showCounter">
      <span class="total">{{ count }}/100字</span>
    </div>
    <div v-if="activeTab === 0" class="list-section">
      <h3>最新评论</h3>
      <div class="list">
        <!-- 最新评论列表 -->
        <div class="item" v-for="(commentItem, index) in latestComments" :key="index">
          <img src="./stores/bilibili.jpg" alt="" class="tx">
          <div class="info">
            <p class="name">{{ commentItem.name }}</p>
            <p class="text">{{ commentItem.text }}</p>
            <p class="time">{{ commentItem.time }}</p>
            <span class="good">
              <img src="./stores/点赞.png" alt="" @click="incrementLike(index)">
              <p>{{ commentItem.likes }}</p>
              <img src="./stores/赞.png" alt="" @click="incrementDislike(index)">
              <p>{{ commentItem.dislikes }}</p>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="activeTab === 1" class="list-section">
      <h3>最热评论</h3>
      <div class="list">
        <!-- 最热评论列表 -->
        <div class="item" v-for="(commentItem, index) in hottestComments" :key="index">
          <img src="./stores/bilibili.jpg" alt="" class="tx">
          <div class="info">
            <p class="name">{{ commentItem.name }}</p>
            <p class="text">{{ commentItem.text }}</p>
            <p class="time">{{ commentItem.time }}</p>
            <span class="good">
              <img src="./stores/点赞.png" alt="" @click="incrementLike(index)">
              <p>{{ commentItem.likes }}</p>
              <img src="./stores/赞.png" alt="" @click="incrementDislike(index)">
              <p>{{ commentItem.dislikes }}</p>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      comment: '',
      comments: [],
      count: 0,
      showCounter: false,
      activeTab: 0,
      avatars: [],
      names: [
        '隔壁老王',
      ],
    };
  },
  computed: {
    latestComments() {
      return this.comments.slice().sort((a, b) => new Date(b.time) - new Date(a.time));
    },
    hottestComments() {
      return this.comments.slice().sort((a, b) => b.likes - a.likes);
    },
    totalComments() {
      return this.comments.length;
    },
  },
  methods: {
    showCount() {
      this.showCounter = true;
    },
    hideCount() {
      this.showCounter = false;
    },
    updateCount() {
      this.count = this.comment.trim().length;
    },
    setActiveTab(index) {
      this.activeTab = index;
    },
    publishComment() {
      if (this.comment.trim() !== '') {
        const newComment = {
          text: this.comment,
          time: new Date().toLocaleString(),  // 修改为本地时间
          likes: 0,
          dislikes: 0,
          avatar: this.getRandomAvatar(),
          name: this.getRandomName(),
        };
        this.comments.push(newComment);
        this.comment = '';
        this.showCounter = false;
      }
    },
    incrementLike(index) {
      this.comments[index].likes += 1;
    },
    incrementDislike(index) {
      this.comments[index].dislikes += 1;
    },
    getRandomAvatar() {
      return this.avatars[Math.floor(Math.random() * this.avatars.length)];
    },
    getRandomName() {
      return this.names[Math.floor(Math.random() * this.names.length)];
    },
  },
};
</script>

<style scoped>
.mainBox {
  width: 1020px;
  margin: 0 auto;
}
.header {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: 30px;
  line-height: 30px;
  margin-bottom: 10px;
}
.comment {
  font-size: 24px;
  color: black;
}
.commentNum {
  font-size: 14px;
  color: gray;
  margin-left: -250px;
}
.switch {
  div {
    display: inline-block;
    margin: 0px 6px;
    font-size: 16px;
    cursor: pointer;
  }
  .active {
    color: red;
    font-weight: bold;
  }
}
.headPortrait {
  width: 48px;
  height: 48px;
  border-radius: 48px;
  margin: 0px 15px;
}
/*发布*/
.wrapper {
  position: relative;
  left: -60px;
  min-width: 400px;
  max-width: 800px;
  display: flex;
  justify-content: flex-end;
}
.avatar {
  overflow: hidden;
  width: 48px;
  height: 48px;
  margin-right: 20px;
  border-radius: 50%;
  background: url('./stores/avatar.jpg') no-repeat center / cover;
}
.tx {
  position: relative;
  left: -60px;
  top: 35px;
  width: 48px;
  height: 45px;
  border-radius: 50%;
}
.wrapper textarea {
  flex: 1;
  height: 40px;
  width: 400px;
  padding: 10px;
  border-color: transparent;
  outline: none;
  resize: none;
  background: #f5f5f5;
  border-radius: 4px;
  transition: all 0.5s;
}
.wrapper textarea:focus {
  height: 45px;
  border-color: #e4e4e4;
  background: #fff;
}
.wrapper button {
  width: 70px;
  height: 41px;
  margin-left: 10px;
  border: none;
  color: #fff;
  background: #00aeec;
  border-radius: 5px;
  cursor: pointer;
}
.wrapper .total {
  margin-right: 80px;
  margin-top: 5px;
  color: #999;
  opacity: 1;
  transition: all 0.5s;
}
.info {
  position: relative;
  top: -15px;
}
.info .name {
  color: #fb7299;
}
.info .time {
  color: #a09f9f;
  font-size: 12px;
}
.good {
  width: 100px;
  height: 15px;
  position: absolute;
  left: 120px;
  top: 48px;
  display: flex;
}
.good img {
  margin-left: 8px;
}
.good p {
  margin-left: 5px;
  font-size: 10px;
  color: #a09f9f;
}
.header {
  width: 500px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.comment-count {
  font-size: 25px;
  font-weight: 700;
  margin-right: 5px;
}
.tabs {
  display: flex;
  align-items: center;
}
.tab {
  cursor: pointer;
  padding: 5px 15px;
  margin-left: -1px;
  border: 1px solid transparent;
  border-radius: 5px;
  font-size: 12px;
}
.tab.active {
  color: #7299fb;
  border: 2px solid pink;
}
.divider {
  color: #ccc;
  margin: 0 10px;
}
</style>
